<?php
use yii\helpers\Url;

$web = Url::base();

$site_name = \app\models\Mall::getCurrentInstitutionSiteName();
$this->title = $site_name . '-蟹蟹有礼';
$imgUrl = 'http://' . \app\librarys\aliyun_oss\Config::BucketName() . '.' . \app\librarys\aliyun_oss\Config::ImageEndpoint() . '/' . \app\librarys\aliyun_oss\Config::Folder() . '/special/xxyl';
?>

<script src="<?= $web ?>/js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">
    .hede-img {
        width: 16rem;
        height: 10rem;
        margin-bottom: .9rem;
    }

    .hede-img img {
        width: 16rem;
        height: 10rem;
    }

    .hot-goods {
        width: 16rem;
        height: auto;
    }

    .hot-goods .title {
        width: 3.75rem;
        height: 1.15rem;
        margin: 0 auto;
    }

    .hot-goods .title img {
        width: 3.75rem;
        height: 1.15rem;
    }

    .hot-goods .content {
        margin-top: .45rem;
        width: 16rem;
        overflow: hidden;
    }

    .hot-goods .content ul li {
        float: left;
        width: 7.525rem;
        height: 10.5rem;
        margin-left: .325rem;
        margin-bottom: .325rem;
        background: #fff;
        border-radius: .25rem;
        position: relative;
    }

    .hot-goods .content ul li img {
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        width: 7.525rem;
        height: 7.525rem;
    }

    .hot-goods .content ul li .name {
        margin-top: .4rem;
        margin-left: .6rem;
        font-size: .45rem;
        color: #878787;
    }

    .hot-goods .content ul li .integral {
        position: absolute;
        right: .6rem;
        bottom: .4rem;
        font-size: .6rem;
        color: #e30038;
    }

    .explain {
        margin-top: 1.15rem;
        width: 16rem;
    }

    .explain img {
        width: 16rem;
    }

    .content {
        background-color: #f7f8f8;
    }
</style>

<div class="main">
    <div class="hede-img">
        <img src="<?= $imgUrl ?>/crab-head-img.jpg"/>
    </div>
    <div class="hot-goods">
        <div class="title">
            <img src="<?= $imgUrl ?>/crab-hot-title.jpg"/>
        </div>
        <div class="content">
            <ul>
                <li>
                    <a href="goods-detail?goods_code=DLHSB064">
                        <img class="lazy" data-original="<?= $imgUrl ?>/crab-content-299.jpg"/>
                    </a>
                    <p class="name">蒂娅壹玛阳澄湖大闸蟹</p>
                    <p class="integral">积分：<span>299</span></p>
                </li>
                <li>
                    <a href="goods-detail?goods_code=DLHSB065">
                        <img class="lazy" data-original="<?= $imgUrl ?>/crab-content-399.jpg"/>
                    </a>
                    <p class="name">蒂娅壹玛阳澄湖大闸蟹</p>
                    <p class="integral">积分：<span>399</span></p>
                </li>
                <li>
                    <a href="goods-detail?goods_code=DLHSB066">
                        <img class="lazy" data-original="<?= $imgUrl ?>/crab-content-499.jpg"/>
                    </a>
                    <p class="name">蒂娅壹玛阳澄湖大闸蟹</p>
                    <p class="integral">积分：<span>499</span></p>
                </li>
                <li>
                    <a href="goods-detail?goods_code=DLHSB067">
                        <img class="lazy" data-original="<?= $imgUrl ?>/crab-content-599.jpg"/>
                    </a>
                    <p class="name">蒂娅壹玛阳澄湖大闸蟹</p>
                    <p class="integral">积分：<span>599</span></p>
                </li>
                <li>
                    <a href="goods-detail?goods_code=DLHSB068">
                        <img class="lazy" data-original="<?= $imgUrl ?>/crab-content-799.jpg"/>
                    </a>
                    <p class="name">蒂娅壹玛阳澄湖大闸蟹</p>
                    <p class="integral">积分：<span>799</span></p>
                </li>
                <li>
                    <a href="goods-detail?goods_code=DLHSB069">
                        <img class="lazy" data-original="<?= $imgUrl ?>/crab-content-999.jpg"/>
                    </a>
                    <p class="name">蒂娅壹玛阳澄湖大闸蟹</p>
                    <p class="integral">积分：<span>999</span></p>
                </li>
                <li>
                    <a href="goods-detail?goods_code=DLHSB070">
                        <img class="lazy" data-original="<?= $imgUrl ?>/crab-content-1399.jpg"/>
                    </a>
                    <p class="name">蒂娅壹玛阳澄湖大闸蟹</p>
                    <p class="integral">积分：<span>1399</span></p>
                </li>
                <li>
                    <a href="goods-detail?goods_code=DLHSB071">
                        <img class="lazy" data-original="<?= $imgUrl ?>/crab-content-1899.jpg"/>
                    </a>
                    <p class="name">蒂娅壹玛阳澄湖大闸蟹</p>
                    <p class="integral">积分：<span>1899</span></p>
                </li>
                <li>
                    <a href="goods-detail?goods_code=DLHSB072">
                        <img class="lazy" data-original="<?= $imgUrl ?>/crab-content-2999.jpg"/>
                    </a>
                    <p class="name">蒂娅壹玛阳澄湖大闸蟹</p>
                    <p class="integral">积分：<span>2999</span></p>
                </li>
                <li>
                    <a href="goods-detail?goods_code=DLHSB073">
                        <img class="lazy" data-original="<?= $imgUrl ?>/crab-content-3999.jpg"/>
                    </a>
                    <p class="name">蒂娅壹玛阳澄湖大闸蟹</p>
                    <p class="integral">积分：<span>3999</span></p>
                </li>

            </ul>
        </div>
    </div>
    <div class="explain">
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img0.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img1.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img2.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img3.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img4.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img5.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img6.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img7.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img8.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img9.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img10.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img11.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img12.jpg"/>
        <img class="lazy" data-original="<?= $imgUrl ?>/crab-explain-img13.jpg"/>
    </div>
    <script type="text/javascript">
        $(function () {
            $("img.lazy").lazyload({});
        });
    </script>
</div>
